@import 'src/res/theme/xxhz';

.screenBox {
  width: 750px;
  position: relative;

  .screen__bj {
    position: absolute;
    width: 750px;
    height: 100vh;
    background: rgba(0, 0, 0, .5);
    z-index: 99;
    left: 0;
    top: 0;
  }

  .screen__list {
    position: absolute;
    width: 750px;
    top: 82px;
    left: 0;
    background: #fff;
    box-sizing: border-box;
    padding: 0 30px;
    z-index: 100;

    .taro-scroll {
      overflow-y: auto;
    }

    .screen__item {
      line-height: 80px;
      font-size: 26px;
      color: #666;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;

      &:last-child {
        border-bottom: none;
      }
    }

    .on {
      color: $mainColor;
    }
  }

  .screen__top {
    background: #fff;
    z-index: 100;
    width: 750px;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 78px;
    border-top: 1PX solid #d5d5d5;
    border-bottom: 1PX solid #d5d5d5;

    .shu {
      width: 1PX;
      height: 40px;
      background: #d9d9d9
    }

    .screen__city, .screen__other {
      width: 49%;
      text-align: center;
      font-size: 26px;
      line-height: 78px;
      color: #616161;

      &:after {
        content: "";
        width: 0;
        height: 0;
        display: inline-block;
        vertical-align: middle;
        margin-left: 8px;
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;
        border-top: 8px solid #999;
      }
    }

    .on {
      color: $mainColor;

      &:after {
        border-top: 10px solid $mainColor;
      }
    }
  }
}
